<template>
    <div class="home">
        <el-row display="margin-top:10px">
            <el-input v-model="input" placeholder="请输入书名"
                      style="display:inline-table; width: 30%; float:left"></el-input>
            <el-button type="primary" @click="addBook()" style="float:left; margin: 2px;">新增</el-button>
        </el-row>
        <el-row>
            <el-table :data="bookList" style="width: 100%" border>
                <el-table-column prop="id" label="编号" min-width="100">
                    <template scope="scope"> {{ scope.row.pk }} </template>
                </el-table-column>
                <el-table-column prop="book_name" label="书名" min-width="100">
                    <template scope="scope"> {{ scope.row.fields.book_name }} </template>
                </el-table-column>
                <el-table-column prop="add_time" label="添加时间" min-width="100">
                    <template scope="scope"> {{ scope.row.fields.add_time }} </template>
                </el-table-column>
                <el-table-column fixed="right"
                                 label="操作"
                                 width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button @click="editBook(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: 'home',
        data() {
            return {
                input: '',
                bookList: [],
            }
        },
        mounted: function () {
            this.showBooks()
        },
        methods: {
            addBook() {
                axios.get('http://127.0.0.1:8000/api/add_book?book_name=' + this.input)
                    .then((response) => {
                        // let res = JSON.parse(response.data)
                        let res = response.data
                        if (res.error_num === 0) {
                            this.showBooks()
                        } else {
                            this.$message.error('新增书籍失败，请重试')
                            console.log(res['msg'])
                        }
                    })
            },
            showBooks() {
                axios.get('http://127.0.0.1:8000/api/show_books')
                    .then((response) => {
                        let res = response.data
                        console.log(res)
                        if (res.error_num === 0) {
                            this.bookList = res['list']
                        } else {
                            this.$message.error('查询书籍失败')
                            console.log(res['msg'])
                        }
                    })
            },
            editBook(row) {
                this.$prompt('书籍名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator: (val) => {
                        if (!val) {
                            return false;
                        }
                    },
                    inputErrorMessage: '书籍名称不能为空',
                    inputValue: row.fields.book_name,
                }).then(({value}) => {
                    console.log(row)
                    axios.post('http://127.0.0.1:8000/api/edit_books', {
                        id: row.pk,
                        name: value,
                    })
                        .then((response) => {
                            let res = response.data
                            console.log(res)
                            if (res.error_num === 0) {
                                this.bookList = res['list']
                                this.$message({
                                    type: 'success',
                                    message: '书籍名称修改为: ' + value
                                });
                            } else {
                                this.$message.error('编辑书籍失败')
                                console.log(res['msg'])
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消编辑'
                    });
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>